<style type="text/css">
	body{
		/* 背景颜色 */
		background-color: #f4f4f4;
	}
	.content{
		/* border: 2px solid blue; */
		/* 显示方式：将块级标签变为容器 */
		display: flex;
		width: 808px;
		margin: 100px auto;
	}
	.main{
		/* 边框：尺寸 形态 颜色 */
		border: 1px solid #f3f3f3;
		/* 高度 */
		height: 300px;
		/* 宽度 */
		width: 200px;
		background-color: #FFFFFF;
	}
	.top{
		/* border: 2px solid green; */
		/* 内边距 */
		padding: 30px;
	}
	img{
		width: 140px;
	}
	.main:hover img{
		/* 水平向左移动20像素 */
		/* transform: translateX(-20px); */
		/* 垂直向上移动 */
		/* transform: translateY(-20px); */
		/* 左下角移动 */
		transform: translate(-20px,20px);
	}
	h6{
		/* border: 2px solid blue; */
		/* 外边距 */
		margin: 10px 20px;
		/* 段落文本不换行 */
		white-space: nowrap;
		/* 内容溢出：隐藏 */
		overflow: hidden;
		/* 当行文本溢出：省略号 */
		text-overflow: ellipsis;
	}
	.main:hover h6{
		color: red;
	}
	.price{
		border: 1px solid red;
		height: 32px;
		/* 行高:一行文本 */
		line-height: 32px;
		margin: 10px 20px;
		/* 水平对齐方式：水平居中 */
		text-align: center;
		background-color: red;
	}
	.origin{
		/* border: 1px solid blue; */
		width: 78px;
		/* 右浮动 */
		float: right;
		background-color: #FFFFFF;
		/* 字体颜色 */
		color: #999999;
		/* 字体修饰线：删除线 */
		text-decoration: line-through;
	}
	.miaosha{
		color: #FFFFFF;
		/* 字体加粗 */
		font-weight: bold;
	}
</style>
<body>	
	<div class="content">	
		<div class="main" title="国家地理National Geographic背包女时尚大容量双肩包男15.6英寸笔记本电脑包旅行防泼水学生情侣书包 红白热">
			<!-- 商品这展示体 -->
			<div class="top">
				<img src="packsack.jpg" >
			</div>
			<!-- 商品描述 -->
			<h6>
				国家地理National Geographic背包女时尚大容量双肩包男15.6英寸笔记本电脑包旅行防泼水学生情侣书包 红白热
			</h6>
			<!-- 商品价格 -->
			<div class="price">
				<span class="miaosha">&yen;139:00</span>
				<span class="origin">&yen;199:00</span>
			</div>
		</div>
		
		<div class="main" title="美型 手机直播支架便携云台三脚架抖音快手短视频网课网红神器微单摄像机拍照相机伸缩三角支架1.5米送手机夹">
			<!-- 商品这展示体 -->
			<div class="top">
				<img src="bracket.jpg" >
			</div>
			<!-- 商品描述 -->
			<h6>
				美型 手机直播支架便携云台三脚架抖音快手短视频网课网红神器微单摄像机拍照相机伸缩三角支架1.5米送手机夹
			</h6>
			<!-- 商品价格 -->
			<div class="price">
				<span class="miaosha">&yen;59:00</span>
				<span class="origin">&yen;129:00</span>
			</div>
		</div>
		
		<div class="main" title="精工（SEIKO）手表 日本原装进口SEIKO5号运动系列防水夜光水鬼自动/手动上链机械男表SRPC53J1">
			<!-- 商品这展示体 -->
			<div class="top">
				<img src="watches.jpg" >
			</div>
			<!-- 商品描述 -->
			<h6>
				精工（SEIKO）手表 日本原装进口SEIKO5号运动系列防水夜光水鬼自动/手动上链机械男表SRPC53J1
			</h6>
			<!-- 商品价格 -->
			<div class="price">
				<span class="miaosha">&yen;1399:00</span>
				<span class="origin">&yen;2999:00</span>
			</div>
		</div>
		
		<div class="main" title="麦品汇  2020年夏季新款加肥加大码女装胖mm韩版显瘦短袖t恤女简约宽松百搭上衣200斤 -1013白色 L(115-125斤)">
			<!-- 商品这展示体 -->
			<div class="top">
				<img src="T-shirt.jpg" >
			</div>
			<!-- 商品描述 -->
			<h6>
				麦品汇  2020年夏季新款加肥加大码女装胖mm韩版显瘦短袖t恤女简约宽松百搭上衣200斤 -1013白色 L(115-125斤)
			</h6>
			<!-- 商品价格 -->
			<div class="price">
				<span class="miaosha">&yen;89:00</span>
				<span class="origin">&yen;159:00</span>
			</div>
		</div>
				
	</div>	
</body>








